<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox">
                    </th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>图片</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in shopcartList" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="item.checked">
                    </td>
                    <td>{{ item.pname }}</td>
                    <td>{{ item.price }}</td>
                    <td><img :src="item.pic" alt=""></td>
                    <td>
                        <button @click="changeNum(item.id,item.num,'-')">-</button>
                        <input type="text" v-model="item.num" class="numInput">
                        <button @click="changeNum(item.id,item.num,'+')">+</button>
                    </td>
                    <td>{{ item.price*item.num }}</td>
                 
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6">{{ totalPrice }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>
<script lang='ts' setup>
import {onMounted} from 'vue'
import {storeToRefs} from 'pinia'
import {useShopcartStore} from '@/store/shopcart'
const {shopcartList,totalPrice}=storeToRefs(useShopcartStore())
const {GET_SHOPCART,CHANGE_NUM}=useShopcartStore()
const changeNum=(id:number,n:number,flag:string)=>{
    switch(flag){
        case '+':
            CHANGE_NUM(id,n+1)
            break;
        case '-':
            CHANGE_NUM(id,n-1)
            break;
    }   
}
onMounted(()=>{
    GET_SHOPCART()
})

</script>
<style lang='scss' scoped>
table{
    border-collapse: collapse;
}
td,th{
    border: 1px solid #ccc;
}
img{
    width: 80px;
}
.numInput{
    width: 40px;
}
</style>